<template>
  <el-dialog
      v-model="centerDialogVisible"
      :title="formTitle"
      width="70%"
      destroy-on-close
      center
      @close="dialogClose">
    <div  style="text-align: end;">
      <el-button class="Btn" size="small" type="topSubButtom" @click="addCostPlan()">
        <svg-icon icon-class="add" class="buttonSvg"/>
        新建
      </el-button>
    </div>
    <el-table
        ref="singleTableRef"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
        @current-change="handleCurrentChange"
    >
      <el-table-column property="costPlanName" label="方案名称" width="120" />
      <el-table-column property="deviceType" label="仪表类型" width="120">
        <template #default="props">
          {{deviceTypeObj[`${props.row.deviceType}`]}}
        </template>
      </el-table-column>
      <el-table-column property="costPlanType" label="方案类型">
        <template #default="props">
          {{costPlanTypeObj[`${props.row.costPlanType}`]}}
        </template>
      </el-table-column>
      <el-table-column property="costPlanColumnInfo" label="方案信息" width="120" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button class="Btn" size="small" type="upd" @click="editCostPlan(scope.row)">
            <svg-icon icon-class="edit" class="buttonSvg"/>
          </el-button>
          <el-button class="btn-donate" size="small" type="del" @click="delCostPlan(scope.row)">
            <svg-icon icon-class="del" class="buttonSvg"/>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottomButton">
      <el-button class="affirm" @click="bindingCostPlan" style="width: 47.5%;height: 100%;">确认</el-button>
      <el-button class="cancel" @click="centerDialogVisible = false" style="width: 47.5%;height: 100%;">取消</el-button>
    </div>
  </el-dialog>
  <AddCostPlanDialog ref="AddCostPlanDialog"/>
</template>
<script>
import _ from "underscore";
import AddCostPlanDialog from "@/views/charging/components/AddCostPlanDialog.vue"
let component;
export default {
  name: "CostPlanManagement",
  data() {
    return {
      formTitle: '',
      tableData:[],
      deviceIds:[],
      centerDialogVisible: false,
      deviceTypeObj: {
        "1": "水表",
        "2": "电表",
        "3": "冷却塔",
        "4": "热量表",
        "5": "流量计",
        "6": "冷热表",
        "7": "阀门",
        "8": "水泵",
        "9": "温控仪",
        "10": "VAV温控仪",
        "11": "时间采样仪",
        "12": "制冷主机"
      },
      costPlanTypeObj:{
        "1":"定价",
        "2":"区间",
        "3":"阶梯"
      },
      currentRow:null,
    }
  },
  components: {AddCostPlanDialog},
  methods: {
    async showDialog(row) {
      component = this;
      component.deviceType = row.deviceType
      component.deviceList = row.deviceList;
      await component.dataQuery();
      component.$nextTick(() => {
        component.formTitle = '付费方案';
        component.actionType = 'costPlanEdit';
        component.deviceIds = row.deviceIds;
      });
    },
    async dataQuery() {
      let response = await component.$asyncPost("costPlan", {
        actionType: "costPlanQuery",
        deviceType: component.deviceType
      });
      if (response.success) {
        component.centerDialogVisible = true;
        component.tableData = response.dataList;
        let costPlanIdObj = _.groupBy(component.deviceList, "costPlanId")
        if (Object.keys(costPlanIdObj).length === 1) {
          for (const costPlanId in costPlanIdObj) {
            let selectCostPlan = _.find(component.tableData, function (data) {
              return data.costPlanId === costPlanId
            })
            component.setCurrent(selectCostPlan);
          }
        }
      }
    },
    editCostPlan(row){
        component.$refs.AddCostPlanDialog.showDialog(row);
      }
    ,
      delCostPlan(row)
      {
        this.$confirm("是否删除所选方案?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          customClass: "confirm"
        }).then(async () => {
          try {
            let response = await this.$asyncPost("costPlan", {
              actionType: "costPlanDelete",
              costPlanIds: [row.costPlanId],
            });
            if (response.success) {
              component.$message.success("删除成功");
              component.dataQuery(); // 重新获取数据以更新列表
            } else {
              component.$message.error(response.message);
            }
          } catch (error) {
            component.$message.error("删除发生错误");
          }
        })
            .catch(() => {
              component.$message.info("取消");
            })
      },
      async bindingCostPlan() {
      if(component.currentRow){
        let deviceIds = _.map(component.deviceList,function (data){ return data.deviceId })
        let response = await this.$asyncPost("costPlan", {
          actionType: "costPlanBind",
          costPlan: component.currentRow,
          deviceIds:deviceIds,
        });
        if(response.success){
          component.$message.success("绑定成功");
          component.$parent.queryData();
          component.centerDialogVisible = false;
        }
      }
      },
      setCurrent(row)
      {
        component.$refs.singleTableRef.setCurrentRow(row);
      }
    ,
      handleCurrentChange(val)
      {
        component.currentRow = val;
      }
    ,
      addCostPlan()
      {
        component.$refs.AddCostPlanDialog.showDialog({deviceType: component.deviceType});
      }
    ,

      dialogClose()
      {
        component.centerDialogVisible = false;
      }
    }
}
</script>

<style scoped>

</style>